<template>
  <strong style="font-size: 22px;">工具管理</strong>
  <el-card class="tool-card" shadow="hover" style="margin-top: 18px;">
    <el-table :data="toolList" border style="width: 100%" :header-cell-style="{background: '#f8f8f9', color: '#333', fontWeight: 'bold'}">
      <el-table-column prop="name" label="工具名称" min-width="120">
        <template #default="scope">
          <el-icon v-if="scope.row.icon === '活动报名'" style="margin-right: 6px;"><Document /></el-icon>
          <el-icon v-else style="margin-right: 6px;"><Tickets /></el-icon>
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="count30" label="30天内活动数量" width="120" align="center" />
      <el-table-column prop="join30" label="30天内参与人数" width="120" align="center" />
      <el-table-column prop="income30" label="30天内收款金额(元)" width="150" align="center" />
      <el-table-column prop="countTotal" label="累计活动数量" width="120" align="center" />
      <el-table-column prop="joinTotal" label="累计参与人数" width="120" align="center" />
      <el-table-column prop="incomeTotal" label="累计收款金额(元)" width="150" align="center" />
      <el-table-column prop="status" label="状态" width="90" align="center">
        <template #default="scope">
          <span v-if="scope.row.status === '正常'" style="color: #52c41a; font-weight: bold;"><i style="font-size: 14px; vertical-align: middle; color: #52c41a;">●</i> 正常</span>
          <span v-else style="color: #ff4d4f; font-weight: bold;"><i style="font-size: 14px; vertical-align: middle; color: #ff4d4f;">●</i> 已停用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template #default="scope">
          <el-link v-if="scope.row.status === '正常'" type="primary" :underline="false" @click="onDisable(scope.row)">禁用</el-link>
          <el-link v-else type="primary" :underline="false" @click="onEnable(scope.row)">启用</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 启用/禁用确认对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogType === 'disable' ? '工具禁用确认' : '工具启用确认'" width="420px" align-center :close-on-click-modal="false">
      <div style="font-size: 15px; color: #333; margin: 18px 0;">
        {{ dialogType === 'disable'
          ? '禁用该工具后，活动管理里将无法创建或复用该工具相关的活动。'
          : '启用该工具后，活动管理里将继续创建该工具相关的活动。' }}
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          :type="dialogType === 'disable' ? 'danger' : 'primary'"
          @click="confirmAction"
        >确认</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Document, Tickets } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// TODO: 后续用真实API替换静态数据
const toolList = ref([
  {
    icon: '活动报名',
    name: '活动报名',
    count30: 50,
    join30: '12,351',
    income30: '85,203.00',
    countTotal: 406,
    joinTotal: '612,412',
    incomeTotal: '123,203.00',
    status: '正常'
  },
  {
    icon: '抢优惠',
    name: '抢优惠',
    count30: 52,
    join30: '23,511',
    income30: '-',
    countTotal: 128,
    joinTotal: '23,824',
    incomeTotal: '-',
    status: '已停用'
  }
])

const dialogVisible = ref(false)
const dialogType = ref<'disable' | 'enable'>('disable')
const currentTool = ref<any>(null)

const onDisable = (row: any) => {
  currentTool.value = row
  dialogType.value = 'disable'
  dialogVisible.value = true
}
const onEnable = (row: any) => {
  currentTool.value = row
  dialogType.value = 'enable'
  dialogVisible.value = true
}

const confirmAction = () => {
  dialogVisible.value = false
  // TODO: 这里可以替换为真实接口调用
  const success = Math.random() > 0.3 // 70%概率成功
  if (dialogType.value === 'disable') {
    if (success) {
      currentTool.value.status = '已停用'
      ElMessage.success({ message: '工具已禁用', showClose: true })
    } else {
      ElMessage.error({ message: '工具禁用失败，请重新尝试', showClose: true })
    }
  } else {
    if (success) {
      currentTool.value.status = '正常'
      ElMessage.success({ message: '工具已启用', showClose: true })
    } else {
      ElMessage.error({ message: '工具启用失败，请重新尝试', showClose: true })
    }
  }
}
</script>

<style scoped>
.tool-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 18px 24px;
}
</style>
